<template>
  <div class="root">
    <!-- 直接给子组件加上ref，不仅可以拿到dom元素，还能拿到这个组件身上的data、methods等属性 -->
    <Child ref="child"></Child>
    <button @click="showChild">click</button>
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  components: {
    Child,
  },
  methods: {
    showChild(){
      // 这样就可以直接读到子组件的data中的number，甚至你还可以修改，但是我们不建议你这么做，因为会乱套的
      console.log(this.$refs.child.number);
      // 当然，你也可以调用子组件methods里的方法
      this.$refs.child.sayHello();
    }
  },
};
</script>

<style scoped>
.root {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
}

div {
  height: 100px;
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
